React Hands on & Tips

100DaysOfCode

React

100DaysOfCode – Days 8 to 12 – React

 I’ve spent the last few days learning more React, I needed to get to a point where I could solve simple tasks without copying the answer from other fellow, so I came back to freeCodeCamp and continue with the Front End Libraries Certification, just where I abandoned it because it was not getting the React concepts. Now after a week having my hands on in some code and easy problems, it has been quite a smooth path to follow and founding some interesting knowledge to keep in mind about React.

Here my list of things to have into account for my future React proyects:

  • The best practice with React is to place API calls or any calls to your server in the lifecycle method componentDidMount(). This method is called after a component is mounted to the DOM.
  •  The first is unidirectional data flow. State flows in one direction down the tree of your application’s components, from the stateful parent component to child components. The child components only receive the state data they need.
  • complex stateful apps can be broken down into just a few, or maybe a single, stateful component. The rest of your components simply receive state from the parent as props, and render a UI from that state. 
  • state updates may be asynchronous – this means React may batch multiple setState() calls into a single update. This means you can’t rely on the previous value of this.state or this.props.
  • Using a function with setState guarantees you are working with the most current values of state and props.
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));
  • One common way is to explicitly bind this in the constructor so this becomes bound to the class methods when the component is initialized.
  • stateless functional component is any function you write which accepts props and returns JSX.
  • stateless component, on the other hand, is a class that extends React.Component, but does not use internal state (covered in the next challenge).
  • stateful component is a class component that does maintain its own internal state. You may see stateful components referred to simply as components or React components.
  • The componentDidMount() method is also the best place to attach any event listeners you need to add for specific functionality. 
  • React provides a synthetic event system which wraps the native event system present in browsers. This means that the synthetic event system behaves exactly the same regardless of the user’s browser – even if the native events may behave differently between different browsers. (Cool!!!!)
  •  FYI: As a rule, any hyphenated style properties are written using camel case in JSX.
  • Since React is a JavaScript view library and you can run JavaScript on the server with Node, this is possible. In fact, React provides a renderToString() method you can use for this purpose.

React Fresh start

100DaysOfCode

React

Hi there!

Today it’s my first day in the #100DaysOfCode, and I will start getting deeper with React. I already took some steps but I wanted for long to get a step forward, so here we go.

#100DaysOfCode – Day 1 : React

By now, I think we all know what React is and how well it’s rated right now, so I’m not going to waste your time, or mine, repeating what thousands of other sites can tell you. Without further ado, let’s get started!

How to get started with React – I found this “gem” in my “usual suspect” place to get all the good and free stuff about learning anything to do with coding, freecodecamp. It also includes a free guide to get React Ready with your JavaScript, is it not cool? I think it’s a great idea to know where you are and what you need to have to learn something. Well done, Chris!

Today, I read the JavaScript guide which I found clear and easy, I had a clear idea that I had all the knowledge needed and I continued with creating my new React app.

I had all the needed “weapons” to start the fight (Node.js, VSCode, etc) so I just had to type:

npx create-react-app my-app

And the magic started! I had a look in the contents and I will continue tomorrow with more React coding.

It was nice at least to get this stone rolling.

Django Modeling

Python into the web

Django

The next step to continue with the Django project is to add some models. Just follow the steps bellow to have them migrated in the database. You must have your virtual environment activated (remember, in your Powershell or terminal just run: )

\flask\Script\activate

Let’s go to our directory app “blogs” with our favourite IDE or text editor, in my case inside “blog”, in models.py of your app, insert under #Create your models here (obviously he,he,he) something like that, in any case whatever you need to be in your model, in my case :

class Entry(models.Model):
    """An entry for your blog"""
    title = models.CharField(max_length=400)
    date_added = models.DateTimeField(auto_now_add=True)
    text = models.TextField()

    def __str__(self):
        """Return a string representation of the model."""
        return self.title

To see the different kinds of fields that you can use in a model :

https://docs.djangoproject.com/en/2.2/ref/models/fields/

The next step is to modify the database so it can store information related to our model Entry and apply our migration. So, from the terminal, we will run the follow commands:

python manage.py makemigrations blogs
python manage.py migrate

Whenever you want to modify the data that your Project (Blog) manages we’ll follow these three steps:

  • Modify models.py
  • Call makemigrations on our app (blogs)
  • Tell Django to migrate the project

Let’s add another model just to show for example, Tags. It’s a relation of many_to_many, so a lot of Entries can use many Tags, and these Tags can be used for many Entries. In our case we need to modify our Entry model and add Tag model.

class Entry(models.Model):
    """An entry for your blog"""
    title = models.CharField(max_length=400)
    date_added = models.DateTimeField(auto_now_add=True)
    text = models.TextField()
    tags = models.ManyToManyField('Tag', related_name='tags')

    def __str__(self):
        """Return a string representation of the model."""
        return self.title

class Tag(models.Model):
    """An entry for your blog"""
    tag_name = models.CharField(max_length=400)

    def __str__(self):
        """Return a string representation of the model."""
        return self.tag_name

Remember, after the modification to run on your terminal the next two mandatory steps, to see your modifications:

python manage.py makemigrations blogs
python manage.py migrate

In your admin area you can easily add data to your models. Just login as superuser and there you go: http://127.0.0.1:8000/admin

Django Hands on

Python into the web

Django

I started with Python last month, just to see what is the fuss about it. I can see how simple it is and that makes it quite powerful, but coming from Ruby and Ruby on Rails, I can see serious resemblance between both of them, and now with Django more of the same. It’s fine, it’s not a critic, not bad feelings, it’s just an observation, if you “jump” from one to another it will not be a “cliff jumping” just a “mud puddle” kind of jump.

Here the steps to have a Django project kicking in no-time. You must have previously python 3 installed ( I followed these steps ). I did in a Windows 10 machine, so this my list of steps. Open a Powershell with Administrator rights and start typing:

# Create directory for your new project
mkdir blog
cd blog

# Create a virtual environment for your project
python -m venv ll_env
ll_env\Scripts\activate 
# to stop it 
deactivate

# Install Django
pip install django

# Create the project in Django ATTENTION: Don't forget the . at the end!!!
django-admin startproject blog .

# Creating the database SQLite
python manage.py migrate

# Viewing the project 
python manage.py runserver

# go to
http://127.0.0.1:8000

# Tada!!!!

# Create an App inside your project
# Your virtual environment must be activated
ll_env\Scripts\activate 
python manage.py startapp blogs

You will have to modify settings.py in under your project “Blog” to add your app, so it looks like:

..... Snip ..... 
INSTALLED_APPS = [
    # My apps
    'blogs',
    
    # Default django apps
    'django.contrib.admin',
    'django.contrib.auth',
..... Snip ..... 
# Let's create a superuser for our admin part
python manage.py createsuperuser 
(enter username, and password of your choice, the email is totally optional)

And now you can login in your app as superuser in the admin area : http://127.0.0.1:8000/admin/

And now it’s when you start creating models, views, templates, etc.