FEATURES
25 JavaScript tools
React
reactjs.org
Created by Facebook, React is
one of the most popular
JavaScript frameworks out
there at the moment. It is
primarily built to provide the user
interface of an application.
It is constructed on the concept of
components – individual blocks of
content that tell React how to render each
part of an application. When something
changes, React will work out what needs
to update on the page. Virtually all of the
logic that deals with how the application
behaves is dealt with inside a component,
which makes them easily reusable and
they can often be shared across projects.<pre>
class App extends React.Component {
render() {
return (<div className=”App”>
<Magazine title=”Net Mag” />
</div>
)
}
}
</pre>While not essential, a lot of React projects
are written in JSX. It is a language that
looks and functions in a similar way to
HTML but enables components to easily
work alongside each other.
Each component has a special ‘render’
method that tells React what to display.
Internal state or external values called
‘props’ hold information about what
the render should ultimately look like,
whether that comprises text or other
child components.
React employs a unidirectional data
flow, meaning that data is stored in a
parent and passed down into its children.If a child needs to update that data,
specially crafted methods can be passed
down for the child to call.
React Router is a popular package that
supplies special components to React for
internal navigation. Depending on the
URL supplied, React Router can serve
specific components to different parts of
an application.
Redux is commonly paired with React
to manage application-wide state.
Through special bindings, React is able
to communicate with a large object that
stores all the data for the application.
Select parts of this state can then be
passed to components to dictate how it
should display.
Overall, React is a relatively lightweight
framework that is versatile enough for
a lot of different projects. While not as
fully featured as Angular, it is possible
to piece together all the parts for each
project as required.Above React Sight is a Chrome plugin that visualises component hierarchy alongside state and propsFRAMEWORKS