Introducing form-for. ReactJS Forms Made Easy – Pedro Silva Moreira – Medium

Introducing form-for. #ReactJS Forms Made Easy

  • Binding componentsAs you can see on the code above, each field has a type set to it; some even have a couple extra properties.Now, we need to tell form-for what components to render.
  • I created a package for bootstrap components that makes your life veeery easy.
  • Building the formNow, let’s put together the User, the bootstrap components and the Form and Field tags.4.
  • The code is very straight forward, just like the one you saw above.And if you want more sandbox examples, I have two others in my profile: MobXFormFor goes really well with MobX.
  • If you don’t like comment too, lemme know how you think it could be

I’ve been coding for a few years and played with a few technologies. In this path, I’ve become a big fan of a Rails gem called simple_form. I’m also a fan of React. With these two in mind, I decided…
Continue reading “Introducing form-for. ReactJS Forms Made Easy – Pedro Silva Moreira – Medium”

⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!

  • How well that static site performs and how easily you can build that site is another story.ProsVery easy to get startedWell documentedConsSubpar developer experience for static functionality no hot-reloadingLarge per-page JS bundles, resulting in a lot of unnecessary duplicate code being downloaded.Difficult root component customizationDestructive routing.
  • We also knew that we needed to ditch built-in proprietary connectors ASAP; being able to get your data from anywhere is important, but the ability to use and access that data in your site is paramount.Most importantly, we needed a tool that would allow us to build things like an…
  • It’s insanely fast, touts fantastic SEO capabilities, and is probably the most React-friendly static-site library on the internet.Let’s get to it.How does it work?react-static starts by exporting a single JS bundle, which includes every template for your entire site.
  • To connect a component to this data, you use a convenient HOC called getRouteProps.The HTML files generated by react-static ensure that pages load instantly and are optimized for SEO.Once the page is loaded, your site invisibly and instantly transitions to your react app.At this point, navigating around your app will…
  • You’ve worked hard enough producing and organizing all of the data for your website, so the last thing you need is some superfluous GraphQL layer or custom component lifecycle lodging itself between your data and your pages.

At Nozzle.io, we take SEO, site performance, and user/developer experience very seriously. Over the last year, we’ve launched many sites using different static site tools that claim to solve these…
Continue reading “⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!”

Container Components – Learn React with chantastic – Medium

The container component pattern in #ReactJS is crucial:

  • Container ComponentsOne React pattern that’s had the impact on my code is the container component pattern.In Jason Bonta talk High Performance Components, there’s this little gem about container components.The idea is simple:A container does data fetching and then renders its corresponding sub-component.
  • “Corresponding” meaning a component that shares the same name:StockWidgetContainer = StockWidgetTagCloudContainer = = PartyPooperListYou get the idea.Why containers?Say you have a component that displays comments.
  • So, you put everything in one place:class CommentList extends React.Component { this.state = { comments: [] }; componentDidMount() { fetchSomeComments(comments = this.setState({ comments: comments })); } render() { return ( ul {this.state.comments.map(c = ( li{c.body}—{c.author}/li ))} /ul ); }}Your component is responsible for both fetching data and presenting it.
  • There’s nothing “wrong” with this but you miss out on a few benefits of React.ReusabilityCommentList can’t be reused unless under the exact same circumstances.Data structureYour markup components should state expectations of the data they require.
  • This time with a containerFirst, lets pull out data-fetching into a container component.class CommentListContainer extends React.Component { state = { comments: [] }; componentDidMount() { fetchSomeComments(comments = this.setState({ comments: comments })); } render() { return CommentList comments={this.state.comments} /; }}Now, let’s rework CommentList to take comments as a prop.const CommentList = props = ul {props.comments.map(c = ( li{c.body}—{c.author}/li ))} /ulExample CodepenSo, what did we get?We actually got a lot…We’ve separated our data-fetching and rendering concerns.We’ve made our CommentList component reusable.We’ve given CommentList the ability to set PropTypes and fail loudly.I’m a big fan of container components.

Say you have a component that displays comments. You didn’t know about container components. So, you put everything in one place: Your component is responsible for both fetching data and presenting…
Continue reading “Container Components – Learn React with chantastic – Medium”

No more hassle with React Native

No more hassle with @reactnative -  @ir_ignite @infinite_red #reactNative #ignite #devLife

  • If you have any experience with React Native, you’ll already know about some great React Native libraries.
  • You might have even heard about this awesome React Native repository where we can find wonderful libraries.
  • They have created Ignite, a framework (or kit) of libraries using best practices for React Native.
  • There are a lot of really cool things to learn, and I highly recommend you create a new Ignite app and check out the generated code.
  • I’ve previously talked about Ignite in this drip, the libraries they use and how to start a new app.

No more hassle with React Native
Continue reading “No more hassle with React Native”

Using React Native UI toolkits with Exponent – The Exponent Log

  • We previously required that fonts used in an Exponent app use our proprietary …
  • Using React Native UI toolkits with Exponent
  • Folks often drop by the Exponent Slack and ask us if we support NativeBase, Shoutem UI, and React Native Elements.
  • Never miss a story from The Exponent Log , when you sign up for Medium.
  • To use Shoutem UI: npm i @shoutem/ui –save and load the required fonts .

Folks often drop by the Exponent Slack and ask us if we support NativeBase, Shoutem UI, and React Native Elements. Up until this past week, we supported React Native Elements but not the others. But…
Continue reading “Using React Native UI toolkits with Exponent – The Exponent Log”

You Might Not Need Redux

You Might Not Need #Redux

#ReactJS

  • Next to his ramblings you may also follow Bramus on Twitter .
  • 2001 – Follow the blog via RSS or via Twitter
  • Professionally – after having worked as a web developer for several years at several web agencies – Bramus became a Lecturer Web Technologies within the study programme Professional Bachelor ICT .
  • The RSS Feed of this blog is also available via Twitter .
  • Bramus also freelances using the 3RDS moniker.

If you’re working on an extensible terminal, a JavaScript debugger, or some kinds of webapps, it might be worth giving Redux a try, or at least considering some of its ideas.
Continue reading “You Might Not Need Redux”

React, Redux without Webpack :)

Get rid of webpack.config.js, build scripts and a ton of dev dependencies in #ReactJS proj.

  • > npm install -g react-app-tools > react-app new # Scaffold a new project > react-app start # Launch your React app
  • { ” private “: true , ” dependencies “: { ” react-app “: “^1.0.0″ , }, ” devDependencies “: { ” react-app-tools “: “^1.0.0″ , }, ” scripts “: { ” build “: “react-app build” , ” start “: “react-app start” , } }
  • Konstantin Tarkus wrote a story · 13 hours ago
  • Connect with influencers and smart developers.
  • Share your feedback or send me a direct message on Twitter , this will help to shape the core of this project and decide what features it should provide out of the box.

Read the full article, click here.


@Hashnoder: “Get rid of webpack.config.js, build scripts and a ton of dev dependencies in #ReactJS proj.”


Have you ever thought about getting rid of webpack.config.js, build scripts and a ton of dev dependencies in your React project? This might be possible wit.


React, Redux without Webpack 🙂