Giter Site home page Giter Site logo

react-laravel's Introduction

Code Climate Build Status

react-laravel

With react-laravel you'll be able to use ReactJS components right from your Blade views, with optional server-side rendering, and use them on the client-side with React due to unobtrusive JavaScript.

Installation

V8js dependency

It's important to know that react-laravel has an indirect dependency of the v8js PHP extension.

You can see how to install it here: how to install v8js.

Composer

Set the minimum-stability of your composer.json to dev, adding this:

  "minimum-stability": "dev"

Then run:

  $ composer require talyssonoc/react-laravel:0.11

After that you should add this to your providers at the config/app.php file of your Laravel app:

  'React\ReactServiceProvider'

And then run:

  php artisan vendor:publish

And the react.php file will be available at the config folder of your app.

Usage

After the installation and configuration, you'll be able to use the @react_component directive in your views.

The @react_component directive accepts 3 arguments:

  @react_component(<componentName>[, props, options])

  //example
  @react_component('Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ])

  // example using namespaced component
  @react_component('Acme.Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ])
  • componentName: Is the name of the global variable that holds your component. When using Namespaced Components you may use dot-notation for the component name.
  • props: Associative of the props that'll be passed to your component
  • options: Associative array of options that you can pass to the react-laravel:
    • prerender: Tells react-laravel to render your component server-side, and then just mount it on the client-side. Default to true.
    • tag: The tag of the element that'll hold your component. Default to 'div'.
    • html attributes: Any other valid HTML attribute that will be added to the wrapper element of your component. Example: 'id' => 'my_component'.

All your components should be inside public/js/components.js (you can configure it, see below) and be global.

You must include react.js, react-dom.js and react_ujs.js (in this order) in your view. You can concatenate these files together using laravel-elixir.

react-laravel provides a ReactJS installation and the react_us.js file, they'll be at public/vendor/react-laravel folder after you install react-laravel and run:

  $ php artisan vendor:publish --force

For using the files provided by react-laravel and your components.js file, add this to your view:

  <script src="{{ asset('vendor/react-laravel/react.js') }}"></script>
  <script src="{{ asset('vendor/react-laravel/react-dom.js') }}"></script>
  <script src="{{ asset('js/components.js') }}"></script>
  <script src="{{ asset('vendor/react-laravel/react_ujs.js') }}"></script>

If you'll use a different version from the one provided by react-laravel (see composer.json), you got to configure it (see below).

Configurations

You can change settings to react-laravel at the config/react.php file:

  return [
    'source' => 'path_for_react.js',
    'dom-source' => 'path_for_react-dom.js',
    'dom-server-source' => 'path_for_react-dom-server.js',
    'components' => [ 'path_for_file_containing_your_components.js' ]
  ];

All of them are optional.

  • source: defaults to public/vendor/react-laravel/react.js.
  • dom-source: defaults to public/vendor/react-laravel/react-dom.js.
  • dom-server-source: defaults to public/vendor/react-laravel/react-dom-server.js.
  • components: defaults to public/js/components.js. Multiple components files may be specified here.

Your components.js file(s) should also be included at your view, and all your components must be at the window object.

Thanks

This package is inspired at react-rails.

react-laravel's People

Contributors

18601673727 avatar awylie199 avatar janhohner avatar jimpeters avatar phaza avatar rajikaimal avatar talyssonoc avatar tomcaserta avatar willvincent avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-laravel's Issues

Debugging

Is there a way to enable debugging through this?

The ability to turn this into a more comprehendible error:

V8Js::compileString():19628: TypeError: Cannot read property 'fields' of undefined

v8js on Laravel Homestead with php7

I just can't get the above combination to work no matter what I try.

pecl install v8js-0.2.0 fails because "libv8 must be version 3.24.6 or greater"

pecl install v8js-0.1.3 fails because "ext/standard/php_smart_str.h: No such file or directory"

All dependencies are installed as far as I can see. Is there any help for this at the moment?

Syntax error

HI

Do you have any idea why I'm getting this error below when trying to add this in my view @react_component('Message', [ 'name' => 'Hue' ])

V8Js::compileString():18903: SyntaxError: Unexpected token <

Best way to connect laravel routes and react-router?

Loving this package... got this all working in an app.

One question I have is how would you hook up the routing. I see 2 options.

  1. Keep client-side routing on the client - and only use Laravel for api stuff or full page reloads
  2. Pass Laravel routes to the react-router if they don't exist (404)

Thoughts?

NPM Install Issue

I usually run npm on my local machine rather than my homestead machine so this fails whenever I run it on homestead for unknown issues (Im running homestead on windows).

Perhaps we can manually instally the npm libraries after in another without it being part of the build process?

`installing npm dependencies in '/home/vagrant/Code/roo/vendor/talyssonoc/react-laravel'...
npm WARN temp-composer-extra-asssets@ No license field.
npm ERR! Linux 4.4.0-22-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! node v5.12.0
npm ERR! npm v3.8.6
npm ERR! path ../acorn/bin/acorn
npm ERR! code EPROTO
npm ERR! errno -71
npm ERR! syscall symlink

npm ERR! EPROTO: protocol error, symlink '../acorn/bin/acorn' -> '/home/vagrant/Code/roo/vendor/talyssonoc/react-laravel/node_modules/.bin/acorn'
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /home/vagrant/Code/roo/vendor/talyssonoc/react-laravel/npm-debug.log`

Multiple react apps within single laravel instance

Right now, all react components goes into 'components' => public_path('js/components.js'). Is it possible to have something like

In config/react.php

'components' => [
public_path('js/app_1_components.js'),
public_path('js/app_2_components.js'),
public_path('js/app_3_components.js'),
]

update

Hi good day can you help me how to update your react to react 16?

Minimum Version of Laravel

Hello there, i want to know if there's mininum version of the laravel framework that can run with this library?

My current project laravel's version is 4.2, is it working well in laravel 4.2 ?

Thankyou so much,
best regards

v8js compil error in CentOS

Hello,

I try to compil v8js to CentOS but i have an error :

checking for V8 version... NONE
configure: error: could not determine libv8 version

Any idea ?
Thank you !!

Better instructions for setup/installation on Vagrant/Homestead

I've been having a hell of a time getting this to work in a Homestead box... do I simply follow this:

Install v8js on Linux (works with Homestead)

First run:

$ sudo apt-get install libv8-dev g++
$ sudo pecl install v8js-0.1.3
Then add extension=v8js.so to your php.ini file.

It seems like there must be more to it than this - also, wouldn't I need to provision this somehow in my Vagrantfile?

Guide for Laravel for REST API only

Hi there,

I want to use Laravel for REST API only. I also use react-router so routing is taken care of. However I do need server side rendering, and especially setting the page title server side IF the user has loaded that page with a deep link.

Is it possible to use react-laravel just for REST API and server side rendering (for initial ReactDOM.render and page title)? Is there a guide for such a thing? (i also use redux)

(server side page title and meta description is important for sharing on social media like facebook, and server side rendering for web crawlers not supporting js)

Construct ReactJS only when needed.

I have been profiling and building a faster version, as I have added custom methods which are only relevant to my codebase I have not had the time to make a pull request to this library. This issue is just a reminder for me to make a PR at some point. In any case:

Currently regardless of if the page has prerendering enabled the server will still construct the ReactJS class which in turn executes the reactjs source. This can slow down websites that do not use ReactJS server side rendering as it is needlessly executing the source code (Large React sources can cause upwards of 200ms execution time).

Install V8.JS with composer

Hi, Great library I was thinking to make a similar package, You have done a fantastic job.

When I was thinking to develop this package, I was thinking it would be great if we can install v8.js as pear package through composer. Example

Can we implement this in the package?

undefined:13: ReferenceError: document is not defined

I'm using gulp to mix all my scripts into public/js/app.js.

web.php

Route::get('{slug}', function ($slug) {
    return view('index');
})->where('slug', '(?![api])([A-Za-z\/\-]+)');

index.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>React Laravel</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
</head>
<body>
	<div id="app">
		@react_component('Testing', ['initialData' => 'This is prerendered data'])
	</div>
	<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>

My Components

I only have one component I am using to test things out, which is at root-dir/resources/js/components. then I have my app.js as an entry point for my gulp located at root-dir/resources/js/app.js.

app.js (entry point)

import React from 'react';
import ReactDOM from 'react-dom';

import Testing from './components/Testing';

ReactDOM.render(
	<Testing/>,
	document.getElementById('app')
);

Testing.js (component)

import React from 'react';

const Testing = React.createClass({
	render () {
		console.log(this.props.initialData);

		return (
			<h1>Hello World</h1>
		);
	}
});

export default Testing;

and When I load my page I get this output error:

undefined:13: ReferenceError: document is not defined

I've trying using this instead:

{!! React::render('Testing', ['initialData' => 'Hue']) !!}

but still the same output.

react.php

<?php

return [
  'source'     => base_path('node_modules/react/dist/react.min.js'),
  'dom-source' => base_path('node_modules/react-dom/dist/react-dom.min.js'),
  'dom-server-source' => base_path('node_modules/react-dom/dist/react-dom-server.min.js'),
  'components' => base_path('public/js/app.js')
];

btw my npm is throwing me this whenever I do npm ls

npm ERR! peer dep missing: react@^0.14.7, required by [email protected]
npm ERR! peer dep missing: fbjs@^0.7.2, required by [email protected]
npm ERR! peer dep missing: react-children@^0.0.3, required by [email protected]
npm ERR! peer dep missing: react-universal@^0.0.3, required by [email protected]

Configuring

Hi I am new to laravel and to reactJS. I am using gulp to mix all my scripts into one file. What am I suppose to put in these? how am I suppose to configure react-laravel? I have a fresh laravel installation with react-laravel, react-and-friends: react.js, react-dom.js, react-router.js installed via npm.

  return [
    'source' => 'path_for_react.js',
    'dom-source' => 'path_for_react-dom.js',
    'dom-server-source' => 'path_for_react-dom-server.js',
    'components' => [ 'path_for_file_containing_your_components.js' ]
  ];

ComposerAutoloaderInit error

Once installed and trying to import a component, I get the following error message:

Cannot declare class ComposerAutoloaderInitac33ba404f5f6ab87abb652f0e9de8bf, because the name is already in use

@react_component directive not working?

Laravel 5.1, React-laravel 0.9.1

Tried on a couple different Laravel apps, both 5.0.* and 5.1. Neither one seemed to render the @react_component directive. Is there a missing step for getting this up and running that's not in the Readme?

Thanks!

Error when running tests that contain @react_component directive

I'm getting an error that ../vendor/autoload.php could not be found when running phpunit on a page that contains the @react_component directive.

Stack trace:

Warning: Uncaught exception 'ErrorException' with message 'require_once(../vendor/autoload.php): failed to open stream: No such file or directory' in /Users/joshtaylor/Websites/----/vendor/talyssonoc/react-laravel/lib/React.php:5
Stack trace:
#0 /Users/joshtaylor/Websites/----/vendor/talyssonoc/react-laravel/lib/React.php(5): Illuminate\Foundation\Bootstrap\HandleExceptions->handleError(2, 'require_once(.....', '/Users/joshtayl...', 5, Array)
#1 /Users/joshtaylor/Websites/----/vendor/talyssonoc/react-laravel/lib/React.php(5): require_once()
#2 /Users/joshtaylor/Websites/----/vendor/composer/ClassLoader.php(412): include('/Users/joshtayl...')
#3 /Users/joshtaylor/Websites/----/vendor/composer/ClassLoader.php(301): Composer\Autoload\includeFile('/Users/joshtayl...')
#4 [internal function]: Composer\Autoload\ClassLoader->loadClass('React\\React')
#5 /Users/joshtaylor/Websites/----/vendor/talyssonoc/react-lara in /Users/joshtaylor/Websites/----/vendor/talyssonoc/react-laravel/lib/React.php on line 5

Update reactjs/react-php-v8js on Packagist

Hi noticed you was maintainer of the packagist package.

It doesn't seem to be updated to reflect changes with the global/window object and as such my components written in JSX transpiled with browserify are not working correctly since its not got a global scope for the components to be placed into.

Without it this is all I get when I render my components:

 V8Js::executeString():23460: ReferenceError: <COMPONENT NAME> is not defined

Are you able to update it to reflect the changes made in: https://github.com/reactjs/react-php-v8js/pull/6/files

Thanks,

Error installing v8js

I know this is only loosely related to your repo, but I thought getting an issue up would be a good reference for those of us debugging getting v8js installed.

Most of us use Laravel's Homestead vagrant box environment. I have a newly provisioned VM and, when I run the installation for v8js, I get the below error/output:

vagrant@homestead:~$ sudo pecl install v8js-beta
WARNING: channel "pecl.php.net" has updated its protocols, use "pecl channel-update pecl.php.net" to update
downloading v8js-0.2.0.tgz ...
Starting to download v8js-0.2.0.tgz (87,387 bytes)
.....................done: 87,387 bytes
28 source files, building
running: phpize
Configuring for:
PHP Api Version:         20131106
Zend Module Api No:      20131226
Zend Extension Api No:   220131226
Please provide the installation prefix of libv8 [autodetect] :
building in /tmp/pear/temp/pear-build-rootqyPDSd/v8js-0.2.0
running: /tmp/pear/temp/v8js/configure --with-v8js
checking for grep that handles long lines and -e... /bin/grep
checking for egrep... /bin/grep -E
checking for a sed that does not truncate output... /bin/sed
checking for cc... cc
checking whether the C compiler works... yes
checking for C compiler default output file name... a.out
checking for suffix of executables...
checking whether we are cross compiling... no
checking for suffix of object files... o
checking whether we are using the GNU C compiler... yes
checking whether cc accepts -g... yes
checking for cc option to accept ISO C89... none needed
checking how to run the C preprocessor... cc -E
checking for icc... no
checking for suncc... no
checking whether cc understands -c and -o together... yes
checking for system library directory... lib
checking if compiler supports -R... no
checking if compiler supports -Wl,-rpath,... yes
checking build system type... x86_64-unknown-linux-gnu
checking host system type... x86_64-unknown-linux-gnu
checking target system type... x86_64-unknown-linux-gnu
checking for PHP prefix... /usr
checking for PHP includes... -I/usr/include/php5 -I/usr/include/php5/main -I/usr/include/php5/TSRM -I/usr/include/php5/Zend -I/usr/include/php5/ext -I/usr/include/php5/ext/date/lib
checking for PHP extension directory... /usr/lib/php5/20131226
checking for PHP installed headers prefix... /usr/include/php5
checking if debug is enabled... no
checking if zts is enabled... no
checking for re2c... re2c
checking for re2c version... 0.13.5 (ok)
checking for gawk... no
checking for nawk... nawk
checking if nawk is broken... no
checking for V8 Javascript Engine... yes, shared
checking for V8 files in default path... not found
configure: error: Please reinstall the v8 distribution
ERROR: `/tmp/pear/temp/v8js/configure --with-v8js' failed

I ran pecl channel-update pecl.php.net, but the error persists. Any ideas?

Are components cached somewhere?

Tried running the react larval example, the "Message" directive worked fine.
However changes to the public/js/components.js file does not seem to affect the rendering of components one bit. I deleted the file and it still works the same way.

Usage with redux

app.js (entry point for elixir)

window.Layout = require('./components/Layout');

index.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>React Laravel</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
</head>
<body>
	<div id="app">
		@if (!empty($prerender))
			@foreach($prerender as $index => $value)
				@react_component($value['component'], $value['data'])
			@endforeach
		@endif
	</div>
	<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>

indexController

Controller for the Catch-all route, which has only one function.

    public function capture ($slug) {
    	$prerender = [
    		[
    			'component' => 'Layout',
    			'data' => [
    				'predata' => 'this is a predata',
    				'people' => [
						[
							'id' => 1,
							'name' => 'April Pineda',
							'age' => '21'
						],

						[
							'id' => 2,
							'name' => 'Kathy Singson',
							'age' => 37
						],

						[
							'id' => 3,
							'name' => 'Cyrine Julianne Pineda',
							'age' => 15
						]
					]
    			]
    		]
    	];

    	return view(
    		'index',
    		[
    			'prerender' => $prerender
    		]
    	);
    }

Layout.js (inside components directory)

const React = require('react');
const People = require('./People');

const Layout = React.createClass({
	render () {
		return (
			<div>
				<h1>Hello World!</h1>
				<p>{this.props.predata}</p>

				<People people={this.props.people}/>
			</div>
		);
	}
});

module.exports = Layout;

People.js (inside components directory)

const React = require('react');

const People = React.createClass({
	render () {
		return (
			<div>
				<p>{'list of People'}</p>
				<ul>
					{this.props.people.map(people => <li key={people.id}>{people.name} is of age {people.age}</li>)}
				</ul>
			</div>
		);
	}
});

module.exports = People;

As you can see, by default I am prerendering the Layout component which is a parent of People. Layout component accepts two props which are:

  • predata: just a string, nothing special
  • people: which is a multidimensional array that would translate into an array of many objects in javascript.

where the props people is actually used for the People component and obviously I couldn't pre-render People component and pre-render Layout component as well because it would cause the People component to be processed twice, therefore, you'll see two People component in the document.

The good thing about having to pre-render data is that even if they have no javascript enabled the data would actually still be loaded in the DOM.

Now what if I would like to pre-render the data inside my redux store?

according to the Redux Docs about Server Side Rendering they actually loaded the pre-rendered data into the window.__preloadedstore__. Any other way that is supported by the framework as well?

React router best practice

Hi loading the stuff from laravel routers needs a complete reload each time and redux between the pages will be useless in this case also.So what do you suggest to fix this issues?

Bug in the after install

The new version has a bug after the installation because of autoload.php, gotta find a way to use autoload.php and it do not break the tests.

Version 0.5 is fine but is without the tests.

Doesn't work with webpack

Hi Talysson,
I'm trying to move Elixir's babel() to straight webpack, but v8js seems didn't recognize a component file like this:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "/js/";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    "use strict";

    var Alert = React.createClass({
      displayName: "Alert",

      render: function render() {
        return React.createElement(
          "h1",
          { className: "text-center" },
          "Alert something there!"
        );
      }
    });

/***/ }
/******/ ]);

which gives me error like this:

V8Js::compileString():1: ReferenceError: Alert is not defined

but this works:


    var Alert = React.createClass({
      displayName: "Alert",

      render: function render() {
        return React.createElement(
          "h1",
          { className: "text-center" },
          "Alert something there!"
        );
      }
    });

License

Hey @talyssonoc, this package looks awesome and I'm considering it for an upcoming project. There is however no license - will you consider including one? I will not be able to use it without an explicit open-source license unfortunately.

composer minimum-stability

is minimum-stability really required for installing this package because if I set it to the composer, all my packages will be updated to dev and im afraid that it will break.

502 Bad Gateway

I am using a fresh Homestead box with V8JS version 4.6.0 installed.

When I try to render the view using

@react_component('Message')

OR

{!!React::render('Message')!!}

I get a 502 Bad Gateway. I have researched for nearly 8 hours, trying several different ways of fixing this problem through nginx and php5-fpm. But simply changing the above code to standard text, the application works without any issues. This is the exact error that is being added to the error log:

2015/08/06 03:34:41 [error] 28795#0: *1 recv() failed (104: Connection reset by peer) while reading response header from upstream, client: 10.0.2.2, server: laravel.local, request: "GET / HTTP/1.1", upstream: "fastcgi://unix:/var/run/php5-fpm.sock:", host: "laravel.local:8000"

I am not receiving any other errors, and it seems to be that the code itself is breaking the application..not the restrictions placed on the application via nginx or php5-fpm.

Any thoughts?

Edit:

I tried changing my nginx settings to fix the problem, and the error changed; this time it tells me it cannot find the /var/run/php5-fpm.sock file. It is in fact there though which makes no sense to me.

IE9 Invalid calling object

Hi

I am having issues with IE9.

Uploading image.png <img width="704" alt="screenshot 2015-08-17 11 55 30" src="https://cloud.githubusercontent.com/assets/622010/9303783/2e94c662-44d9-11e5-9248-e4a17a4adfa8.png"> โ€ฆ

I just wondered if anyone had seen this behaviour before and may know a work around.

Thanks

Minimum stability problem

Sorry to keep posting issues I thank you for your work on this project.

However, when we put the minimum stability as dev it doesnt just affect react-laravel,
it affects every composer library including laravel/framwork itself.

As such, I think you need to suggest it only be set for react-laravel in the tutorial?

Blade not rendering @react_component

Hey,

This package looks great but I can't get it to work, I have followed the docs line for line but when it comes to including @react_component('Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ]) inside a blade file it just print it out as if its a string.

Is this a known fault or something I am doing incorrectly? Like I say I have followed the guide word for word.

Thanks

es6

Is someone using this package with es6/export/import?
Can't get it to work. If yes, could you provide a simple example?
Thanks!

could someone please set minimum-stability to stable?

I must to say this package is a great work, but I need to use this package in production env, so "minimum-stability": "dev" as mentioned in doc is too dangerous to me, or is there a way to set minimum-stability to dev for specific package?

Full example

Excellent work, and appreciate you sharing it.

I'm new to React JS and recently familiar with Blade.

It would be great to have a full example on how to work with this component.

I have searched around the Web for examples using react-laravel, but since this is a fairly new subject specially with Laravel, it would be really helpful to have a full "Hello World" example using Laravel on how to implement this component step by step for creating an UI.

I'm clear on the installation, that is fine. But after reading the usage instructions, and I'm out of context on where or how to start implementing the blade helper:

@react_component([, props, options])

I have so many questions, that I believe only a full example can answer. It would be great to have an example using:

  • How blade template files look like using this component.
  • A before & after transformation from a regular blade view, to one that uses React with your component.
  • A sample view with react components receiving data from Laravel.

I know this project is very recent, and appreciate you sharing this.

Thank you.

The requested PHP extension v8js is missing from your system

Hello,

I install v8js in homestead... Phpinfo() return v8js enabled...
But when i try : composer update, i have this error ๐Ÿ‘

Your requirements could not be resolved to an installable set of packages.

Problem 1
- reactjs/react-php-v8js dev-master requires ext-v8js >=0.1.3 -> the requested PHP extension v8js is missing from your system.
- talyssonoc/react-laravel v0.9.1 requires reactjs/react-php-v8js dev-master -> satisfiable by reactjs/react-php-v8js[dev-master].
- Installation request for talyssonoc/react-laravel 0.9.1 -> satisfiable by talyssonoc/react-laravel[v0.9.1].

Error Fetching Data in React Native with Laravel as a Back-End

Hello Mr./Mrs. Talyssonoc
I was wondering if you could help me to solve this error.
So I am using laravel as my back-end and I've tested all the method and it works tho.
Here's my code for PinjamList.js in RN:

`import React, { Component } from 'react';
import { View, Text, StyleSheet} from 'react-native';
import PropTypes from 'prop-types';

export default class PinjamList extends Component {

static propTypes = {
pinjams: PropTypes.array.isRequired
};
render() {
return (

{this.props.pinjams.map((pinjam) => {
return (

{pinjam.ketua_kegiatan} | { pinjam.lab }

)
})}

);
}
}

const styles = StyleSheet.create({
pinjamList: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-around',
},
pinjamtext: {
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center',
}
});`

And this one is js file for fetching the data:

const URI = 'http://localhost:8000'; export default{ async fetchDataPinjam(){ try{ let response = await fetch(URI + '/api/pinjams'); let responseJsonData = await response.json(); return responseJsonData; } catch(e) { console.log(e); } } }

And this one is the code for displaying the data on the homepage:

<View> { this.state.pinjams.length > 0 ? <PinjamList pinjams={this.state.pinjams} /> : <Text>Tidak Ada Peminjaman</Text> } </View>

But when I try to test it to make sure if its right, this error shown:

`Network request failed

  • node_modules\react-native\Libraries\vendor\core\whatwg-fetch.js:504:29 in onerror
  • node_modules\event-target-shim\lib\event-target.js:172:43 in dispatchEvent
  • ... 8 more stack frames from framework internals`

For some reason, I've looked for my DB also with my Laravel. I hope you can help me to figure out this problem because I am still learning in building this react native app. Thank you so much.

is this still alive?

I was thinking of making a boilerplate for Laravel 5.4 and react+redux ...etc, if this is still alive maybe we could talk it through?

Configuration caching is unnecessary in Laravel 5.x

Laravel 5.1 supports config caching out of the box (with the config:cache command) which would generally be used after a deployment to cache any new configuration values. This makes the manual caching performed by the service provider unnecessary, and even more painful than it would be otherwise if you wanted to update the configuration in a release - you'd have to manually clear the cache.

Happy to submit a PR for this and update the docs if you're interested.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.