React
React is a Javascript library for building user interfaces and UI components. It was created by Facebook and released to the public in 2013. To break this definition down further:
Library: A library is a collection of pre-written code that programmers can use to complete a task without necessarily having to reinvent the wheel when writing code.
User Interface: A user interface is how a user can interact with a website or application.
UI Components: UI components are building blocks for creating distinct elements in an application. For example, a button, header, or footer of a website can be thought of as a UI element.
Why React
When choosing different tools to create a website, React is often compared with frameworks such as Angular or Vue. However, frameworks often have an entire ecosystem around how things should be built. Because React is a library, it is lightweight and offers much more flexibility in terms of how one may implement the design of an application.
Reusable Components
React makes use of components which are reusable pieces of code. They are the building blocks of a React application and allow a programmer to develop applications more efficiently and make code more DRY. When the logic for a component that appears in multiple places is consolidated in one place, it also makes it easier to test and debug the application.
Performance
The Document Object Model or DOM is the data representation of content that is shown on a website. Making updates to elements on a page can be very slow because of how the DOM processes changes. React uses the Virtual DOM to minimize changes to the actual DOM making React applications faster. Compare your experience using app on your phone to the experience of surfing the web on an average site. Using a React app, you don’t often have to worry about lag or waiting for things to load, improving the user's experience.
Popularity
Initially, React was created by Facebook to be used internally and now it is open to the community to use and improve upon. The React community is highly active making it easier for new learners to find support. There is also a plethora of free and paid resources that can be used to learn more about React. React is currently used by thousands of companies around the world including Salesforce, Hulu, Netflix, Reddit, and more.
React Fundamentals
Plain Javascript vs. React
When creating a website for the first time, you may have opted to use HTML, CSS, and plain Javascript to create your website. Others may have experience with using a library or framework to build out a website. What are some of the differences between the two approaches?
React defines a set of rules about how an app should be written and how the UI is created. However, plain Javascript doesn’t really require a set way in which you should organize the functionality of a website or how the UI is defined. Using a library like React can help to make a website more dynamic and support an application as it scales to support more data or users.
JSX
JSX or Javascript XML is a syntax used to write HTML and Javascript together and create React elements to be rendered to the DOM. Using JSX you are able to make use of JS functions and methods such as map() and ternary operations to generate React elements. JSX can also be used to create expressions in React using curly braces.
JSX code must always be wrapped in a single top-level element. You may also use an empty HTML tag (fragment) to wrap multiple lines. To create a class, you would define a className within the JSX tag (rather than the class in HTML). In order to connect the css file containing the class you’ve created to the .js file, you can import the CSS file on the top of the .js file.
Components
A component is a reusable piece of code. Much like a function, it can take in certain inputs and return an output. In the case of components, it is able to take in props to return a React element.
Functional vs. Class Based Components
Components can be written using classes or functions. The difference between the two lies in the syntax. A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element. A class component requires you to extend from React.Component and create a render function which returns a React element.
Props
Props can be passed into a component like a function parameter. The component receives the argument and it can be used in the React element that is generated. Props are how data is passed into a component.
Top comments (1)
Great "intro to React". This piece is a good starter for React newbies