Originally published at Codegram's blog
At Codegram we can spend 5 hours a week doing some learning stuff like reading books, doing an online course, or even crafting some pet project to try a new technology. It's really cool and sometimes we even share with our coworkers what are we doing in our biweekly Codegram's Talk Clubโข๏ธ. We want to make a step forward and we decided to create a new learning resource: introducing Codegram's Workshopsโข๏ธ!
Today we are gonna talk about React and Redux. In this first article of this workshop series we are gonna learn how to bootstrap a React application and create our first components. Stay tuned for future updates in this workshop series and let's start!
Introduction
This course is an introduction to React and Redux. We are gonna learn how to create a react application from scratch and deal with components and their weird JSX syntax.
This is not a complete React course and I want to focus on the basics and how to work with a store. I am not gonna cover some topics like styling your components or testing because these are broad topics that can be covered in future workshops. Even though we are gonna use Webpack I am not gonna cover any complex setup either. Let's begin!
Getting started
First of all we need a React application to start working on! There is a package called create-react-app that is very useful to bootstrap something. You can run this command:
$ npx create-react-app --use-npm practical-react-and-redux
By default the command uses yarn
but I prefer npm
. Let's move to that directory and start the development server:
$ cd practical-react-and-redux
$ npm start
Compiled successfully!
You can now view practical-react-and-redux in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.12:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
This will open your browser automatically to http://localhost:3000 and if you see the React logo spinning then the application has been compiled successfully and we are ready to start doing some stuff!
Spin up your favorite editor and move on ๐
Components are just functions
Let's start our journey creating our first component but, first of all, what's a component? In the React world a component is just a function that returns something that can be rendered in our DOM. Open the src/App.js
file and remove everything.
Hello world components
We are gonna create our first component: the App
component. Every React application has a root component and although you can name it whatever you want it is usually named App
or Application
(notice the CamelCase
syntax). Write this in your src/App.js
file:
// src/App.js
const App = () => {
return 'Hello World!'
}
export default App
If you visit the http://localhost:3000 you will see our message. Congratulations you just write your first component! ๐
You are not limited to just Strings
and you can also write plain HTML in there. Try this:
// src/App.js
const App = () => {
return <p>Hello world!</p>
}
export default App
Oh snap! Our application is not working anymore and we got a compilation error. What did you expect? Do you think that looks like JS? Of course not!
There is so magic โจ behind of this. First of all we are not using plain JS anymore and we started using jsx
. That's a language that compiles to JS and you can think about it as a hybrid between JS and XML (or just HTML).
In order to make that work we need to bring React to the party so let's import it!
// src/App.js
import React from 'react'
const App = () => {
return <p>Hello world!</p>
}
export default App
You might be thinking: why I am importing the React constant if I am not using it? That's true! We are not using the React
constant explicitly but when Webpack compiles this jsx
it's using React.createElement
under the hood to create our component so we need to bring that constant to make it work. If you are curious you can check the main.chunk.js
source file in the browser.
A single component is really boring so let's create a few more components!
Components hierarchy and reusability
Time to create a Dog
๐ถ component! As you may notice there is no folder structure to follow but I like to stick to some conventions. I like to organise my components per feature and also having each component in its own folder:
$ mkdir -p src/dogs/components/dog
In your editor create the Dog.js
file in the new folder that we just created with the following content:
// src/dogs/components/dog/Dog.js
import React from 'react'
const Dog = () => {
return (
<div>
<p>Boira</p>
<p>Score: 13/10</p>
</div>
)
}
export default Dog
Now we can use this component in our App
component like this:
// src/App.js
import React from 'react'
import Dog from './dogs/components/dog/Dog'
const App = () => {
return (
<>
<Dog />
<Dog />
</>
)
}
export default App
You might be wondering what's that ugly thing: <>
. That's an empty tag and we need that for two reasons:
- Every React component needs a single root element.
- We don't want extra markup so the
<>
root element is not gonna render anything
Then we are just rendering two Dog
components. As you can see a component can be used as a simple DOM element. We are enhancing the HTML language adding new tags!
Having two dogs named after my dog Boira is cool but it is cooler if we can change dynamically some things in our components. Enter the props
!
Dynamic components using props
A prop or a property is a component's input data. Remember: components are just functions so props is just the single argument that our function is receiving. Since it is an Object
we can use destructuring like this:
// src/dogs/components/dog/Dog.js
import React from 'react'
const Dog = ({ name, score }) => {
return (
<div>
<p>{name}</p>
<p>Score: {score}/10</p>
</div>
)
}
export default Dog
We added the two props: name
and score
. We are also using those variables inside our template escaping the value using curly braces {}
.
If you refresh the page right now you are gonna see nameless dogs without score and that's very sad. You can think about props as a object that include all HTML attributes given to the DOM element representing your component. In other words, you can set the element of these props giving attributes to the <Dog>
tag:
// src/App.js
import React from 'react'
import Dog from './dogs/components/dog/Dog'
const App = () => {
return (
<>
<Dog name="Boira" score="13" />
<Dog name="Black" score="13" />
</>
)
}
export default App
The application works and we have two different dogs now! There is one problem with our current implementation: we could forget to give a value to the score
prop and a dog could end having a null
score ๐ฑ.
Props validation: avoid bugs
React doesn't include a built-in package for props validation but there is a package called PropTypes that is included by default when we created the application. We can use this package to validate our props and ensure our components are used correctly:
// src/dogs/components/dog/Dog.js
import React from 'react'
import PropTypes from 'prop-types'
const Dog = ({ name, score }) => {
return (
<div>
<p>{name}</p>
<p>Score: {score}/10</p>
</div>
)
}
Dog.propTypes = {
name: PropTypes.string.isRequired,
score: PropTypes.number.isRequired
}
export default Dog
If you reload the app the application, it is working but we have an error in our console ๐ค. We just found a bug! ๐. In the previous snippet we added prop validations and marked both props as required
. We also marked our score
as a number
but we are giving it as a string
right now. Let's fix this:
// src/App.js
import React from 'react'
import Dog from './dogs/components/dog/Dog'
const App = () => {
return (
<>
<Dog name="Boira" score={13} />
<Dog name="Black" score={13} />
</>
)
}
export default App
The change might be a bit subtle: we replaced "13"
with {13}
. Since we are using curly braces again we are evaluating that 13
as a Javascript number
and the error is gone!
Event handlers as props
New requirements: we want to add a button to increase that score
(we are not gonna add a button to decrease it because dogs are awesome). We need to listen to the click
DOM event for a button and lucky for us React supports a onClick
prop. Let's see how this works!
// src/dogs/components/dog/Dog.js
import React from 'react'
import PropTypes from 'prop-types'
const Dog = ({ name, score }) => {
const onClick = () => {
score += 1
console.log(`This is your new score: ${score}`)
}
return (
<div>
<p>{name}</p>
<p>Score: {score}/10</p>
<button onClick={onClick}>Increase score</button>
</div>
)
}
Dog.propTypes = {
name: PropTypes.string.isRequired,
score: PropTypes.number.isRequired
}
export default Dog
Don't click the button yet! Let's check the code first. We added a new button
element to the template and added the onClick
prop. That prop needs to be assigned to a callback function that will be called when the user presses the button. I added a new function called onClick
(naming is hard sorry) and I am increasing the score
prop and logging a message.
If you visit the page and click the button you will see the message prompted in your console with the new score
value. Yeah you did it! Oh...wait. The template is not being updated, we have another bug! ๐
Not really ๐
, props are supposed to be read-only
and our Dog
component is stateless
. We need to make our component stateful
to be able to change that score
!
Just a quick warning โ๏ธ: When a component's prop changes the component is automatically re-rendered but in our case we are not really changing the prop so the view is not updated.
Conclusion
In this article we learned about how to create a React application from scratch and added our first components. In the next article we are gonna learn about stateful
components using React hooks and also we are gonna do our first steps with Redux.
You can find the code examples in this repository. I also tagged the progress for part 1 in case you want to check the repository at this specific moment.
Cover photo by Lachlan Donald
Top comments (0)