First steps with React

We already know how to get the libraries necessary to start coding on React. Let’s make a simple app to create components.

This post is made with the boilerplate mentioned on my last post.

Open your console and create a folder for our new project with the next command. You can create it anywhere you want, I will create it on my Desktop.

$ create-react-app first-app

Now, wait until the packages are downloaded.

wait

Everything ok? Good, now enter to your new project folder and type the command below to start our local server

$ yarn start

Probably your default browser is fired when the server start, showing an example app by default. If not, open your browser and type http://localhost:3000 in the address bar.

The first React app running on your machine, yaaaay!!! Now let’s change some code to create our own component.

What do you need to know about the structure of this boilerplate?

The official documentation of “create-app” is very easy to understand but for this post this is what you need to know:

  • public folder: has the html file that the browser renders
  • src: here is where we will save our React js code, css and images

Let’s start creating our first component, open your editor, open a new file and save it as MyFirstComponent.js inside the src/ folder and type:

Nice, our component is ready to be used. Now open index.js inside src/ and change its contents for:

If you haven’t closed the browser’s tab with your locahost:3000 you notice that the app is updated without use the refresh button or F5, that’s because when you are running the server and modify a file automatically the app reloaded in your browser.

Nice, eh?

What if we want to give some style to our component?

Well, we create a css file with the name of the component(MyFirstComponent.css) inside the src folder:

Update MyFirstComponent.js and put in the second line

import React, { Component } from 'react';
// Component CSS
import './MyFirstComponent.css'

Now our component has a new color for h1 tag and the content of the div is centered.

This looks very simple right? Now let’s make a second component that will be use inside MyFirstComponent.js.

Create two new files in src/ folder Square.js and Square.css.

Yaaaay, now we can render a custom component inside another one and we can use it multiple times inside MyFirstComponent.js.

One last thing for this example, our Square has the same content for all the boxes, wouldn’t it be better if we can pass it data to display via attribute? Well, we can do that using props.

Update MyFirstComponent.js

Update Square.js

Done, now we can pass data to every square and each square can render different data.

Phew! We are ready for now, I think that is a lot of information to play a bit with react and see how its components work.

Please check the codecademy course to see how to use props, display dynamic data and other cool stuff that you can use on React.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s