For React the following tools are suggested, tools with * are required:
- Web Browser (Google Chorme, Moxilla Firefox)*
- Node JS*
- Package Managers (Brew, Chocolatey ).
- Terminal, it can be used with the native terminal but we recommend iTerm2, Hyper, cmder.
- Code editor, it is suggested to use Visual Studio Code.
These extensions are a recommendation to improve your experience in developing with React.
- Install React Developer Tools,
this is in the chrome web store (Web Navigator)
- Debugger for Chrome (Visual Studio Code)
- React Extension Pack (Visual Studio Code)
- Auto Close Tag (Visual Studio Code)
- Prettier - Code Formatter (Visual Studio Code)
It is important for the development of a good project to organize the different components of the work, for this reason it is recommended to generate folders that have similar content, some examples are:
- Components folder, where the necessary components are stored.
- Styles folder, where the project styles are stored, for example the
- Assets folder, where the application static resources such as images are stored.
Remember to change the references once your project is ordered and not make changes, unless it is really necessary, in the index.js
Document Object Model for Document Representation (Document Object Model) is essentially a platform interface that provides a standard set of objects to represent HTML, XHTML and XML documents. A standard model on how these objects can be combined, and a standard interface to access and manipulate them.
- The entire virtual DOM is updated.
- Virtual DOM is compared to a version prior to upgrade. React notices which objects have changed.
- The updated object and only that object is updated in the actual DOM.
- Changes to the actual DOM cause the screen to change.
This process is known as reconciliation.
Verify Node js, with these commands you can verify the version and also if they are installed.
We are going to create a first application with React where some of React's functionalities will be reflected, in this case you must change "name_of_your_application" to the name you want, to make it easier to read from now on my- app.
Now you must enter your my-app directory and start your application.
To see your code you must use, duplicating your terminal, the following:
Once the code has been opened in your editor, in this case recommended Visual Studio Code, you can navigate until you find inside the src folder the
App.js file with a content equal to this:
You can change the content to the following and make the changes you want as the first steps for your adventure in React. In addition, you can see the changes in your browser, for this you must keep your terminal with the server open.
Components are defined as a single unit of code that will have a specifically assigned responsibility that certain behaviors can be encapsulated in components.
This is an example of a component. Create a new file inside your
components folder with the name of
header.js and in this way you can use it later. This type of component is no longer used in EOS Costa Rica, however it is important to understand its definition and use.
This component can be used as follows inside the
"A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API. They are a pattern that arises from the compositional nature of React."
For more information on HoC.
React uses reusable components for all applications, these components can have several versions, which can generate conflicts when making small changes. Storybook is an opensource tool that is used to create visual components in isolation where the components and their versions can be organized in stories.
Next, we give you a list of elements that are taken from the official React documentation to apply in your project.
- Rendering Elements
- Components and Properties
- Status and Life Cycle
- Handling Events
- Conditional Rendering
- Lists and Keys
- Raising the State
- Composition vs. Heritage
Hooks are a new feature in React 16.8. These allow you to use the state and other features of React without writing a class.
Hooks are functions that allow you to "hook" React state and lifecycle from functional components. Hooks don't work inside classes they allow you to use React without classes. (We don't recommend rewriting your existing components overnight, but you can start using Hooks on new ones if you want).
This is an example of use, you can replace the code of your
App.js to test it. In this example they show the dimensions of the screen even when it is resized.