- What is react.js?
- What problems solve?
- What is JSX
- What is Virtual DOM and why it matters?
Just a quickstart script to start coding reactjs.
Create react app is a generator which creates skeleton application ready to start to develop your react.js project. The generated application handles the next parts:
- It creates folders and files structures with a very basic and functional react project.
- It comes with some predefined scripts to work with your reactjs application:
yarn start: Starts the development server.
yarn build: Builds a packaged version of your application to be distributed.
yarn test: Runs your application test suites.
yarn eject: (Advanced).
- Among these scripts, it also handles webpack configuration.
- It installs all needed dependencies to start to work :)
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
- Create a new Component called Counter rendering a simple text.
- Include your new component in App.js component and add it inside render method using JSX.
- Save all files and see what’s happening in your browser.
setState()schedules an update to a component’s state object. When the state changes, the component responds by re-rendering.
- A React component is like a state machine that represents an user interface. Every user action potentially triggers a change in that state machine. Then, the new state is represented by a different React element.
- State, like with React props, is used to store data in React. A difference between state and props is that while the data stored by props is fixed throughout its lifetime, state stores data that can be changed overtime. This change can be in response to user actions, network responses or anything. Also, while props are set by the parent component, state is changed internally by the component itself.
- Initialize your component using its
constructorand set the state with a variable to store the number of clicks initialized with 0.
- Create a class method to increment the number of clicks using
- NOTE you can access previous state calling
- NOTE you can access previous state calling
- Add a button in your render method which call the method created to increment state.
- Add a text printing the value of the increment
- Save all and play with your new counter button.
Most components can be customized when they are created, with different parameters. These creation parameters are called props.
The value of pic is sent to source prop. In style we’re sending an object directly.
- Create a component called CountNumber to show the number of clicks and include it from Counter.
- Set the number of clicks passing its value by props.
Following in the steps of Flux, CQRS, and Event Sourcing, Redux attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen. These restrictions are reflected in the three principles of Redux.
The state of your whole application is stored in an object tree within a single store.
The only way to change the state is to emit an action, an object describing what happened.
To specify how the state tree is transformed by actions, you write pure reducers.
Redux architecture revolves around a strict unidirectional data flow.
- The first step is install the needed libraries:
React bindings for Redux embrace the idea of separating presentational and container components. If you’re not familiar with these terms, read about them first, and then come back. They are important, so we’ll wait!
- Create a Container for your Counter application which returns the Counter component connected to state and dispatch.
Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().
An action is something like this:
You can also define action creators in this format:
- Create an action creator to increase the number of clicks.
Reducers specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe the fact that something happened, but don’t describe how the application’s state changes.
A basic reducer seems like this:
- Create a reducer to increase the number of clicks in the state
The Store is the object that brings them together. The store has the following responsibilities:
- Holds application state.
- Allows access to state via getState().
- Allows state to be updated via dispatch(action).
- Registers listeners via subscribe(listener).
- Handles unregistering of listeners via the function returned by subscribe(listener).
To create and attach the store to your application run this:
- Create store with your reducer and wrap your app in a Provider with the created store.
- Use dispatch in your Counter component to dispatch your action-creator created below.